<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<meta http-equiv="Cache-Control" content="no-cache" />

<title> YESChart </title>


<style type="text/css">
.chart-list div{
	width : 400px;
	height :230px;
	float : left;
}
</style>

<script type="text/javascript" src="swfobject.js">
</script>

<script type="text/javascript" src="classy.js">
</script>

<script type="text/javascript" src="yes-chart.js">
</script>

<script type="text/javascript" >


var yc=null;



	var testData=  [{
            season: '春',
			castA : 100,
			castB : 50,	
            total: 150
        },{
            season: '夏',
			castA : 145,
			castB : 100,	
            total: 245
        },{
            season: '秋',
			castA : 77,
			castB : 40,
            total: 117
        },{
            season: '冬',
			castA : 56,
			castB : 128,
            total: 184
        }]


var charts = {

	pie : new YESChart.chart.PieChart({
			
            data : testData ,
			swfWidth : 300,
			swfHeight : 200,
			dataField : 'total',
            categoryField : 'season',
			extraStyle : {
                legend : {
                    display: 'bottom',
                    padding: 5,
                    font: {
                        size: 13
                    }
                }
            }

	}),

	line : new YESChart.chart.LineChart({
			
            data : testData ,
			swfWidth : 300,
			swfHeight : 200,
			xField: 'season',
			series: [{
				displayName: 'castA',
					yField: 'castA'
				},{
					displayName: 'castB',
					yField: 'castB'
				}],
			extraStyle : {
                legend : {
                    display: 'bottom',
                    padding: 5,
                    font: {
                        size: 13
                    }
                }
            }

	}),	

	column : new YESChart.chart.ColumnChart({
			
            data : testData ,
			swfWidth : 300,
			swfHeight : 200,
			xField: 'season',
			series: [{
				displayName: 'castA',
					yField: 'castA'
				},{
					displayName: 'castB',
					yField: 'castB'
				}],
			extraStyle : {
                legend : {
                    display: 'bottom',
                    padding: 5,
                    font: {
                        size: 13
                    }
                }
            }

	}),	
	
	columnline : new YESChart.chart.ColumnChart({
			
            data : testData ,
			swfWidth : 300,
			swfHeight : 200,

	        xField: 'season',

            tipRenderer : function(chart, record, index, series){
                if(series.yField == 'castA'){
                    return "在"+record.season+"季,A类消费为 " + record.castA;
                }else if(series.yField == 'castB'){
                    return "在"+record.season+"季,B类消费为 " + record.castB;
                }else{
                    return "在"+record.season+"季,总消费为 " + record.total;
                }
            },
            chartStyle: {
                padding: 10,
                animationEnabled: true,
                font: {
                    name: 'Tahoma',
                    color: 0x444444,
                    size: 11
                },
                dataTip: {
                    padding: 5,
                    border: {
                        color: 0x99bbe8,
                        size:1
                    },
                    background: {
                        color: 0xDAE7F6,
                        alpha: .9
                    },
                    font: {
                        name: 'Tahoma',
                        color: 0x15428B,
                        size: 10,
                        bold: true
                    }
                },
                xAxis: {
                    color: 0x69aBc8,
                    majorTicks: {color: 0x69aBc8, length: 4},
                    minorTicks: {color: 0x69aBc8, length: 2},
                    majorGridLines: {size: 1, color: 0xeeeeee}
                },
                yAxis: {
                    color: 0x69aBc8,
                    majorTicks: {color: 0x69aBc8, length: 4},
                    minorTicks: {color: 0x69aBc8, length: 2},
                    majorGridLines: {size: 1, color: 0xdfe8f6}
                }
            },
            series: [{
                type: 'line',
                displayName: '总消费',
                yField: 'total',
                style: {
                    
                   
                    color:0x99BBE8
                }
            },{
                type:'column',
                displayName: 'A类消费',
                yField: 'castA',
                style: {
					image:'bar.gif',
					 mode: 'stretch'
                }
            },{
                type:'column',
                displayName: 'B类消费',
                yField: 'castB',
                style: {
					 mode: 'stretch',
                    color: 0x15428B
                }
            }],
			extraStyle : {
                legend : {
                    display: 'bottom',
                    padding: 5,
                    font: {
                        size: 13
                    }
                }
            }

	}),	
		
	stackcolumn : new YESChart.chart.StackedColumnChart({
			
            data : testData ,
			swfWidth : 300,
			swfHeight : 200,
			xField: 'season',
			series: [{
				displayName: 'castA',
					yField: 'castA'
				},{
					displayName: 'castB',
					yField: 'castB'
				}],
			extraStyle : {
                legend : {
                    display: 'bottom',
                    padding: 5,
                    font: {
                        size: 13
                    }
                }
            }

	}),	

	bar : new YESChart.chart.BarChart({
			
            data : testData ,
			swfWidth : 300,
			swfHeight : 200,
			xField: 'total',
			series: [{
				displayName: 'castA',
					yField: 'castA'
				},{
					displayName: 'castB',
					yField: 'castB'
				}],
			extraStyle : {
                legend : {
                    display: 'bottom',
                    padding: 5,
                    font: {
                        size: 13
                    }
                }
            }

	}),	

	stackbar : new YESChart.chart.StackedBarChart({
			
            data : testData ,
			swfWidth : 300,
			swfHeight : 200,
			xField: 'total',
			series: [{
				displayName: 'castA',
					yField: 'castA'
				},{
					displayName: 'castB',
					yField: 'castB'
				}],
			extraStyle : {
                legend : {
                    display: 'bottom',
                    padding: 5,
                    font: {
                        size: 13
                    }
                }
            }

	}),	

	"___":"___"
}


function init(){
	
	for (var k in charts){
		// render 在指定div中渲染 图表. k为div的id
		charts[k].render(k);
	}
}

function update(){

		var newTestData=  [{
            season: '春',
			castA : 77,
			castB : 40,
            total: 117
        },{
            season: '夏',
			castA : 56,
			castB : 128,
            total: 184

        },{
            season: '秋',
			castA : 145,
			castB : 100,	
            total: 245

        },{
            season: '冬',
			castA : 100,
			castB : 50,	
            total: 150
        }]


	for (var k in charts){
		// refresh 刷新图表, 参数为新的json数组.
		charts[k].refresh(newTestData);
	}
}
</script>

</head>

<body onload="init()">

<input type="button" value="更新图表" onclick="update()" /><br/>

<div class="chart-list">
	
	 <div id="pie">pie<br/></div>
	
	<div id="line">line<br/></div>
	
	<div id="column">column<br/></div>
	
	<div id="columnline">columnline<br/></div>

	<div id="stackcolumn">stackcolumn<br/></div>
	
	<div id="bar">bar<br/></div>
	
	<div id="stackbar">stackbar<br/></div>
</div>
<!--Footer START--> 
 <script src="../function.js" type="text/javascript" charset='utf-8'></script> 
 <script type="text/javascript"> 
 getFooter(); 
 </script> 
 <!--Footer END--> 
 
</body>
</html>

